<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin:0; padding:0; list-style:none;}

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul {position:absolute;left: 0;top: 0;}
#div1 ul li{height:500px;float: left;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>
<script src="../../utils.js"></script>
<script>
window.onload=function () {
  var div = document.querySelector('#div1')
  var ul = document.querySelector('#div1 ul')
  var imgs = document.querySelectorAll('#div1 ul li')
  var ol = document.querySelector('#div1 ol')
  var goPrev = document.querySelector('#goPrev')
  var goNext = document.querySelector('#goNext')
  var btns = [] // 在创建之前没有按钮

  var width = imgs[0].offsetWidth
  var len = imgs.length // 本来的图片张数

  var index = 0
  var lastIndex = 0

  const status = {
      move: Symbol(),
      stop: Symbol()
  }
  var isMove = status.stop // 是否正在运动，默认为静止

  // 根据图片张数创建按钮
  for (var i = 0; i < len; i++) {
    var li = document.createElement('li')
    li.innerHTML = i + 1
    li.className = i === 0 ? 'ac' : ''
    ol.appendChild(li)
    btns.push(li)
  }

  // 在ul后面追加一个第0张图
  ul.appendChild(imgs[0].cloneNode(true))

  // 计算ul宽度
  ul.style.width = (len + 1) * width + 'px'

  // 给按钮点击切换
  btns.forEach((btn, i) => {
    btn.onclick = function () {
      // 判断isMove是否是静止状态
      if (isMove === status.stop) {
        // 改为运动状态
        isMove = status.move
        lastIndex = index
        index = i
        // 缓冲运动到当前index所在的位置
        utils.move1(ul, 'left', -index * width, () => {
          // 运动结束回到stop状态
          isMove = status.stop
        })
        btns[lastIndex].classList.remove('ac')
        btns[index].classList.add('ac')
      }
      
    }
  })

  // 点击向后
  goNext.onclick = function () {
    // 当isMove为false的时候，才让点击生效
    if (isMove === status.stop) {
      // 代码一旦执行到这里意味着开始运动了
      isMove = status.move
      lastIndex = index
      index++
      // index的正常范围 0 ~ len-1
      if (index === len) {
        // 超出正常范围了
        index = 0
        // 可以运动到追加那张图（索引为len），但是运动过去以后要瞬间回到第0张
        utils.move1(ul, 'left', -len * width, () => {
          // 运动结束之后的回调
          ul.style.left = '0px'
          // 运动结束以后回到stop
          isMove = status.stop
        })
      } else {
        utils.move1(ul, 'left', -index * width, () => {
          isMove = status.stop
        })
      }
      // 无论有没有超出范围，按钮都要改变样式
      btns[lastIndex].classList.remove('ac')
      btns[index].classList.add('ac')
    }
  }

  // 点击向前
  goPrev.onclick = function () {
    if (isMove === status.stop) {
      isMove = status.move
      lastIndex = index
      index--
      if (index < 0) {
        // 超出正常范围了
        // 拉到最后一张图
        index = len - 1
        // 把ul瞬间拉到追加那张图，然后再往len-1去move
        ul.style.left = -len * width + 'px'
      }
      // 如果超出范围再if里已经处理好了，所以无论是否超出都要执行后面这三句
      utils.move1(ul, 'left', -index * width, () => {
        isMove = status.stop
      })
      btns[lastIndex].classList.remove('ac')
      btns[index].classList.add('ac')
    }
  }

  // 自动轮播
  div.onmouseenter = function () {
    clearInterval(div.timer)
  }
  // auto函数默认自己先调用一次，调用结束以后 return auto，返回到了函数调用位置，也就是mouseleave事件
  div.onmouseleave = (function auto () {
    div.timer = setInterval(goNext.onclick, 3000)
    return auto
  })()
}

</script>
</head>

<body>
<div id="div1">
	<ul>
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
    <li><img src="images/4.jpg" /></li>
    <li><img src="images/5.jpg" /></li>
  </ul>
  <ol>

  </ol>
  <a href="javascript:;" id="goPrev">&laquo;</a>
  <a href="javascript:;" id="goNext">&raquo;</a>
</div>
</body>
</html>
